<template>
  <el-container>
    <el-header style="text-align: left;">
      <el-button type="primary" icon="el-icon-circle-plus" @click="addNewCity" style="margin: 10px;">新增</el-button>
      <!--搜索框-->
      <el-form :inline="true" :model="input" class="demo-form-inline" style="text-align: left;">

        <el-form-item label="城市等级">
          <el-select v-model="input.level">
            <el-option
              v-for="item in cityLevelList"
              :key="item.level"
              :label="item.label"
              :value="item.level">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="金额范围">
          <el-input v-model="input.money_min" placeholder="最小金额" style="width: 88px"></el-input>
          &ensp;-&ensp;
          <el-input v-model="input.money_max" placeholder="最小金额" style="width: 88px"></el-input>
        </el-form-item>



        <el-form-item>
          <el-button type="primary" @click="getCityData">搜索</el-button>
        </el-form-item>
      </el-form>
      <!--end搜索框-->
    </el-header>
    <el-main style="margin-top: 30px;">
      <el-table
        :data="cityList"
        style="width: 100%">
        <el-table-column
          prop="city"
          label="城市等级">
        </el-table-column>

        <el-table-column
          prop="money"
          label="金额">
        </el-table-column>

        <el-table-column
          prop="created_at"
          label="创建时间">
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">

            <div class="frow fcenter" style="align-items: flex-end;">
              <div><el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button></div>
              <div style="margin-left: 10px;"><el-button size="mini" type="danger" @click="handleDelete(scope.row.level)">删除</el-button></div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-main>

    <el-footer>
      <el-pagination
        background
        style="padding: 20px 0;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="input.page"
        :page-sizes="[5,10,20]"
        :page-size="input.page_size"
        layout="prev, pager, next,sizes"
        :total="cityTotal">
        >
      </el-pagination>
    </el-footer>

    <el-dialog :title="title" :visible.sync="dialogFormVisible" >
      <el-form :model="form">

        <el-form-item label="城市等级" :label-width="formLabelWidth" style="text-align: left;">
          <el-select v-model="form.level" placeholder="请选择城市等级">
            <el-option
              v-for="item in cityLevelList"
              :key="item.level"
              :label="item.label"
              :value="item.level">
            </el-option>
          </el-select>
        </el-form-item>


        <el-form-item label="城市金额" :label-width="formLabelWidth">
          <el-input v-model="form.money" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCity">确 定</el-button>
      </div>
    </el-dialog>

  </el-container>
</template>

<script>
    import {mapState, mapActions} from 'vuex'
    import {editCity} from '@/apilist/SystemSetting'
    export default {
        name: "setCity",
        data(){
            return {
                dialogFormVisible: false,
                input: {
                    level:'',
                    money_min: '',
                    money_max: '',
                    page: 1,
                    page_size: 10,
                },
                dialogFormVisible: false,
                formLabelWidth: '120px',
                form: {
                    id: 0,
                    level: '',
                    money: 0,
                },
                title: '新增城市',
            }
        },
        computed: {
            ...mapState("Setdata",["cityList","cityTotal","cityLevelList"]),
        },
        methods: {
            ...mapActions("Setdata",["getCityListAction"]),
            //搜索
            getCityData(){
                this.getCityListAction(this.input)
            },
            //编辑
            handleEdit(row){
                this.title = '编辑城市'
                this.form.id = row.id
                this.form.level = row.level,
                    this.form.money = row.money
                this.dialogFormVisible=true
            },
            //删除
            handleDelete(level){

            },
            handleSizeChange(page_size){
                this.input.page_size = page_size
                this.getCityData()
            },
            handleCurrentChange(page){
                this.input.page = page
                this.getCityData()
            },

            addCity(){
                editCity(this.form).then(res => {
                    this.$message.success(res.msg)

                    this.dialogFormVisible = false

                    this.getCityData()
                })
            },

            addNewCity(){
                this.form.id = 0
                this.form.level = '',
                    this.form.money = 0
                this.dialogFormVisible=true
            },
        },
    }
</script>

<style scoped>

</style>
